<template>
  <!-- 门禁控制-历史 historyPopUp -->
  <div class="history-popup mediumtablestyle">
    <div class="history-popup-form">
      <el-form ref="form" :model="form" label-width="1.2rem">
        <el-row>
          <el-col :span="12" :offset="2">
            <el-form-item label="监测时间:">
              <el-date-picker
                v-model="form.times"
                type="daterange"
                align="right"
                unlink-panels
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                value-format="yyyy-MM-dd HH:mm:ss"
                style="width:100%"
                :picker-options="pickerOptions"
              ></el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="3" :offset="1">
            <el-button type="primary" icon="el-icon-search" @click="search">搜索</el-button>
          </el-col>
        </el-row>
      </el-form>
    </div>

    <div class="history-popup-table">
      <el-table
        :data="tableData"
        :row-class-name="tableRowClassName"
        style="width: 100%"
        border
        height="100%"
      >
        <el-table-column prop="myIndex" label="序号" width="100"></el-table-column>
        <el-table-column prop="name" label="名称" :show-overflow-tooltip="true"></el-table-column>
        <el-table-column prop="monitorType" :show-overflow-tooltip="true" label="监测类型"></el-table-column>
        <el-table-column prop="monitorTime" :show-overflow-tooltip="true" label="监测时间"></el-table-column>
        <el-table-column prop="state" :show-overflow-tooltip="true" label="状态">
          <template slot-scope="scope">
            <div :class="scope.row.state | collectionValueFilter">{{ scope.row.state | zxjcState }}</div>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="history-popup-pagination centerbox elPaginationStyle">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pages.page"
        :page-sizes="[10, 15, 20]"
        :page-size="pages.pageSize"
        layout="total,prev, pager, next,sizes, jumper"
        :total="pages.totalSize"
      ></el-pagination>
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Vue, Prop, Watch } from "vue-property-decorator";
import { EChartOption } from "echarts";
import { LocksAPIModule } from "@/store/modules/locks";
import time from "@/utils/time.js";
@Component({})
export default class extends Vue {
  public pickerOptions: any = {
    shortcuts: [
      {
        text: "本日",
        onClick(picker) {
          var now = new Date().getTime();
          var startTime = now - 3600 * 1000 * 24 * 1;
          console.log(new Date(startTime), new Date(now));
          picker.$emit("pick", [new Date(startTime), new Date(now)]);
        },
      },
      {
        text: "本周",
        onClick(picker) {
          const weekEnd = new Date().getTime();
          // const weekStart = (new Date().getDate(), 0);
          const weekStart = weekEnd - 3600 * 1000 * 24 * 7;
          picker.$emit("pick", [new Date(weekStart), new Date(weekEnd)]);
        },
      },
      {
        text: "本月",
        onClick(picker) {
          const monthEnd = new Date().getTime();
          // const monthStart = new Date().getMonth() - 1;
          const monthStart = monthEnd - 3600 * 1000 * 24 * 30;
          picker.$emit("pick", [new Date(monthStart), new Date(monthEnd)]);
        },
      },
    ],
  };
  @Prop() datas!: any;
  form: any = {
    times: [],
  };

  //分页数据事件相关
  pages = {
    pageSize: 10,
    page: 1,
    totalSize: 5,
  };

  search() {
    this.pages.page = 1;
    this.fetch();
  }
  //表格数据
  tableData = [
    // {
    //   interval: "#1主变",
    //   name: "#1主变氢气",
    //   Monitoring: "氢气",
    //   time: "2020/08/30 17:50",
    //   state: "正常",
    // },
  ];
  // 表格隔行变色
  tableRowClassName({ row, rowIndex }: any): string {
    // console.log(row, rowIndex);
    if (rowIndex % 2 === 0) {
      return "row1";
    } else {
      return "row2";
    }
  }
  //   分页
  handleSizeChange(val: any) {
    this.pages.pageSize = val;
    this.fetch();
  }
  // 分页事件
  handleCurrentChange(val: any) {
    this.pages.page = val;
    this.fetch();
  }
  addType(arrData) {
    let type = "self";
    let time =
      new Date(arrData.endTime).getTime() -
      new Date(arrData.startTime).getTime();
    if (time >= 1 * 1000 * 60 * 60 * 24 && time < 2 * 1000 * 60 * 60 * 24) {
      type = "day";
    } else if (
      time >= 7 * 1000 * 60 * 60 * 24 &&
      time < 8 * 1000 * 60 * 60 * 24
    ) {
      type = "week";
    } else if (
      time >= 30 * 1000 * 60 * 60 * 24 &&
      time < 31 * 1000 * 60 * 60 * 24
    ) {
      type = "month";
    }
    return type;
  }
  mounted() {
    var dataTime = new Date().getTime();
    (this as any).datatime = time(dataTime);
    var dataTime7 = dataTime - 3600 * 1000 * 24 * 1;
    (this as any).datatime7 = time(dataTime7);
    this.form.times.push((this as any).datatime7);
    this.form.times.push((this as any).datatime);

    this.fetch();
  }

  fetch() {
    var params = {
      endTime: this.form.times[1],
      pageNo: this.pages.page,
      pageSize: this.pages.pageSize,
      dwId: this.datas.id,
      startTime: this.form.times[0],
      interval: "",
    };
    if (this.form.times && this.form.times.length > 1) {
      params.endTime = this.form.times[1];
      params.startTime = this.form.times[0];
      if (this.form.times[0] == this.form.times[1]) {
        if (this.form.times[1]) {
          params.endTime = this.form.times[1].slice(0, 10) + " 23:59:59";
        } else {
          params.endTime = this.form.times[1].slice(0, 10);
        }
      }
    } else {
      params.endTime = "";
      params.startTime = "";
    }
    params.interval = this.addType(params);
    (this as any).$services
      .list({ data: params })
      .then((result: any) => {
        let page = this.pages.page;
        let size = this.pages.pageSize;
        this.tableData = result.data.records.map((v, i) => {
          v.myIndex = (page - 1) * size + i + 1;
          return v;
        });
        this.pages = {
          pageSize: result.data.size,
          page: result.data.current,
          totalSize: result.data.total,
        };
      })
      .catch((err: object) => {
        console.log(err);
      });
  }
}
</script>

<style lang="scss" scoped>
.history-popup {
  //弹框样式
  width: 100%;
  height: 5.8rem;
  box-sizing: border-box;
  padding: 0 0.1rem;
  &-form {
    width: 100%;
    height: 0.5rem;
  }
  &-table {
    width: 100%;
    height: calc(100% - 1rem);
  }

  &-pagination {
    width: 100%;
    height: 0.5rem;
  }
}
</style>
<style lang="scss">
.history-popup {
  .el-date-editor.el-input,
  .el-date-editor.el-input__inner {
    width: 1.9rem;
  }
  .el-form-item__label {
    font-size: 0.18rem;
  }
  .btn {
    font-size: 0.18rem;
  }
}
</style>
